<template>
	<view class="area-picker">
		<picker mode="multiSelector" :range="multiArray" :range-key="'name'" @change="onPickerChange"
			@columnchange="onColumnChange">
			<view class="picker-input">
				{{ selectedArea ||  app.language.qxz }}
			</view>
		</picker>
	</view>
</template>

<script>
	const global = getApp().globalData;
	export default {
		props: {
			areaData: {
				type: Object,
				required: true
			},
			defaultArea: {
				type: Object,
				default: null
			}

		},
		data() {
			return {
				app: {
					global: global,
					name: global.appName,
					language: global.language
				},
				multiArray: [
					[],
					[],
					[]
				], // 三级联动数据
				multiIndex: [0, 0, 0], // 当前选中索引
				selectedArea: '' // 选中显示文本
			};
		},
		watch: {
			defaultArea: {
				immediate: true,
				handler(val) {
					if (val) this.initFromDefault(val);
				}
			},
			areaData: {
				immediate: true,
				handler(newVal) {
					if (newVal) {
						this.initPickerData();
					}
				}
			}
		},
		methods: {
			initPickerData() {
				// 省份数据
				this.multiArray[0] = this.areaData.provinces;

				// 默认选中第一个省份的城市
				if (this.areaData.provinces.length > 0) {
					const provinceCode = this.areaData.provinces[0].code;
					this.multiArray[1] = this.areaData.cities[provinceCode] || [];

					// 默认选中第一个城市的区县
					if (this.multiArray[1].length > 0) {
						const cityCode = this.multiArray[1][0].code;
						this.multiArray[2] = this.areaData.areas[cityCode] || [];
					}
				}
			},

			onColumnChange(e) {
				const {
					column,
					value
				} = e.detail;

				// 省份变化
				if (column === 0) {
					const provinceCode = this.areaData.provinces[value].code;
					this.multiArray[1] = this.areaData.cities[provinceCode] || [];
					this.multiArray[2] = [];
					this.multiIndex = [value, 0, 0];

					// 更新区县
					if (this.multiArray[1].length > 0) {
						const cityCode = this.multiArray[1][0].code;
						this.multiArray[2] = this.areaData.areas[cityCode] || [];
					}
				}
				// 城市变化
				else if (column === 1 && this.multiArray[1].length > 0) {
					const cityCode = this.multiArray[1][value].code;
					this.multiArray[2] = this.areaData.areas[cityCode] || [];
					this.multiIndex = [this.multiIndex[0], value, 0];
				}
			},

			onPickerChange(e) {
				const values = e.detail.value;
				const [province, city, area] = [
					this.multiArray[0][values[0]],
					this.multiArray[1][values[1]] || {
						name: ''
					},
					this.multiArray[2][values[2]] || {
						name: ''
					}
				];

				this.selectedArea = `${province.name} ${city.name} ${area.name}`.trim();
				this.multiIndex = values;

				// 返回选中结果
				this.$emit('change', {
					province,
					city,
					area,
					fullText: this.selectedArea
				});
			},

			initFromDefault(defaultArea) {
				console.log('defaultAreadefaultArea', defaultArea)
				let {
					province,
					city,
					area
				} = defaultArea;

				// 1. 查找省份索引
				let provinceIndex = this.areaData.provinces.findIndex(p => p.code === province.code);
				if (provinceIndex === -1) return;

				// 2. 查找城市索引
				let cities = this.areaData.cities[province.code] || [];
				let cityIndex = cities.findIndex(c => c.code === city.code);
				if (cityIndex === -1) return;

				// 3. 查找区县索引
				let areas = this.areaData.areas[city.code] || [];
				let areaIndex = areas.findIndex(a => a.code === area.code);
				if (areaIndex === -1) return;

				// 更新索引和选中区域
				this.selectedArea = `${province.name} ${city.name} ${area.name}`;
				// 初始化数据
				this.multiArray = [
					this.areaData.provinces,
					cities,
					areas
				];
				
				// 返回选中结果
				this.$emit('change', {
					province,
					city,
					area,
					fullText: this.selectedArea
				});

				
			},
		}
	};
</script>

<style scoped>
	.area-picker {
		/* padding: 20rpx; */
		position: absolute;
		top: 16rpx;
		right: 21rpx;
		font-size: 24rpx;
		color: #808080;
	}

	/* .picker-input {
		padding: 20rpx;
		border: 1rpx solid #e5e5e5;
		border-radius: 8rpx;
		background-color: #fff;
	} */
</style>